<template>
	<view class="conter">
		<header-box :title="title"></header-box>

		<view class="conter-text">
			<view class="bgc">
				<view class="box-btn">
					<view class="" style="margin-bottom: 30rpx;">
						商品分类
					</view>
					<view class="">
						<input type="text" value="" placeholder="请输入产品" placeholder-style="font-size: 28rpx" />
					</view>
				</view>
				<!-- <view class="box-btn">
					<view class="" style="margin-bottom: 30rpx;">
						联系电话
					</view>
					<view class="">
						<input type="text" value="" placeholder="请输入联系电话" placeholder-style="font-size: 28rpx" />
					</view>
				</view>
				<view class="box-btn">
					<view class="" style="margin-bottom: 30rpx;">
						备注
					</view>
					<view class="">
						<input type="text" value="" placeholder="请填写备注" placeholder-style="font-size: 28rpx" />
					</view>
				</view> -->
			</view>
		</view>

		<!-- bg-gradual-green -->
		<view class="add ">
			<view class="remove" @click="showRemove = true">
				删除
			</view>
			<view class="add-class bg-gradual-green">
				保存
			</view>
		</view>



		<!-- 删除的弹框 -->
		<u-popup
			v-model="showRemove"
			mode="center"
			width="580rpx" height="140px"
			border-radius="10">
			<view class="tilte-text">提示</view>
			<view class="" style="font-size: 28rpx; color: #999999; text-align: center;">
				确定要删除吗？
			</view>
			<view class="btn-bor">
				<text class="left-bor" @click="showRemove= false">取消</text>
				<text>确定</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import headerBox from '../../components/header/header.vue'

	export default {
		components: {
			headerBox
		},
		data() {
			return {
				title: '编辑',
				showRemove: false, // 删除的弹层
			}
		}
	}
</script>

<style lang="scss" scoped>
	.conter {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.conter-text {
		padding: 30rpx;

		.bgc {
			width: 100%;
			height: 190rpx;
			padding: 0 30rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;

			.box-btn {
				width: 100%;
				height: 144rpx;
				font-size: 30rpx;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #F0F0F0;
			}
		}
	}

	.add {
		position: absolute;
		bottom: 30rpx;
		left: 50%;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		transform: translateX(-50%);
		text-align: center;
		color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		font-size: 32rpx;

		.remove {
			width: 40%;
			height: 90rpx;
			border-radius: 45rpx;
			background-color: #CCCCCC;
		}

		.add-class {
			width: 40%;
			height: 90rpx;
			border-radius: 45rpx;
		}
	}
	
		
		.tilte-text {
			color: #333;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
		}
		
		.btn-bor {
			width: 90%;
			height: 113rpx;
			color: #7278EC;
			margin: 0 auto;
			line-height: 113rpx;
			margin-top: 40rpx;
			display: flex;
			justify-content: space-around;
			border-top: 1rpx solid #EEEEEE;
			
			.left-bor {
				border-right: 1rpx solid #EEEEEE;
			}
			
			text {
				display: inline-block;
				width: 40%;
				height: 113rpx;
				text-align: center;
			}
		}
</style>
